<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>MyTechRider - Keyboard</title>
	<meta name="description" content="My Tech Rider">
	<meta name="keywords" content="Tech Rider">
	<meta name="author" content="Jonatan Martínez">
	<link rel="shortcut icon" href="images/favicon.ico">

	<link rel="stylesheet" type="text/css" href="css/estilos-app.css">
	<link rel="stylesheet" type="text/css" href="css/bx-slider.css">
</head>
<body>
	<div class="ipad">
		<div class="container-app">
			<header>
				<a href="#">Volver al Backline</a>
				<h1>Keyboard</h1>
			</header>
			<section class="instrument keyboard">
				<form class="musico" action="">
					<input type="text" name="nombre-musico" placeholder="Nombre del músico">
				</form>
				<a class="save" href="#">Guardar</a>
				<div class="clear"></div>
				<section class="col left">
					<h3>Marca</h3>
					<ul class="ilustracion">
						<li>
							<figure><img src="images/ilust-keyboards.png"></figure>
						</li>	
					</ul>
					<div class="brand">
						<ul>
							<li><a href="#">Yamaha</a></li>
							<li><a class="selected" href="#">Nord</a></li>
							<li><a href="#">Korg</a></li>
							<li><a href="#">Kurzweil</a></li>
						</ul>
					</div>
					<form class="canal" action="">
						Canal: <input type="text" name="canal" placeholder="#">
					</form>
					<form class="canal" action="">
						Caja directa: <input type="text" name="canal" placeholder="Si/No">
					</form>
				</section>
				<section class="col right">
					<div class="position">
						<h3>Posición</h3>
						<ul>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a class="selected" href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">6</a></li>
							<li><a href="#">7</a></li>
							<li><a href="#">8</a></li>
							<li><a href="#">9</a></li>
							<li><a href="#">10</a></li>
							<li><a href="#">11</a></li>
							<li><a href="#">12</a></li>
							<li><a href="#">13</a></li>
							<li><a href="#">14</a></li>
							<li><a href="#">15</a></li>
						</ul>
					</div>
				</section>
			</section>
		</div>
	</div>	

	<!-- jQuery library -->
	<script src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src = "js/jquery.easing.1.3.js"></script>

	<!-- BXSLIDER plugin -->
	<script src = "js/jquery.bxslider.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.bxslider').bxSlider({
			  infiniteLoop: true,
			  hideControlOnEnd: true,
			  easing: 'easeOutBounce',
			  infiniteLoop: false,
			  speed: 400
			});	
        });
    </script>

</body>
</html>